<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="static/index.css">
    <style>
        .login-box {
            width: 400px;
            height: 800px;
            margin-right: auto;
            margin-left: auto;
            margin-top: 100px;

        }
    </style>
</head>
<body>
<div class="login-box">
    <div class="register">
        <div class="register_top">
            <div>+</div>
            <h2>欢迎注册</h2>
        </div>

        <div class="register_bottom">
            <form method="post">
                {% csrf_token %}
                <input type="text" class="input" placeholder="请输入昵称" name="nick_name" id="nick_name"/>
                <input type="text" class="input" placeholder="请输入邮箱" name="user" id="user"/>
                <!-- 密码输入框 -->
                <input type="Password" class="input" placeholder="请输入密码" name="pwd" id="pwd"/>

                <!-- 重复密码输入框 -->
                <input type="Password" class="input" placeholder="再次输入密码" id="pwd_two"/>
                <button type="button" id="register" onclick="myfunction()">注册</button>

            </form>

            <!-- 注册按钮 -->
            <script>
                function myfunction() {
                    var mybutton = document.getElementById("register");
                    var name_one = document.getElementById("nick_name");
                     var name_two = document.getElementById("user");
                    var name_th = document.getElementById("pwd");
                    var name_four = document.getElementById("pwd_two");
                    if (name_one.value == ""||name_two.value==""||name_th.value==""||name_four.value==""||name_th.value!=name_four.value)
                        alert("没有输入或密码输入不一致")
                    else{
                         var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                         isok= reg.test(name_two.value);
                    if (!isok) {alert("请输入正确邮箱格式")
                    }
                    else {
                    mybutton.type = "submit";
                    mybutton.click();
                         }
                         }
                }
            </script>
            <p>
                <span>已有账号?</span>
                <a href="/">登入</a>
            </p>
        </div>
    </div>
</div>
</body>
</html>